<!--
 * @FilePath: left.vue
 * @Author: 杜芬
 * @Date: 2023-07-24 14:57:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-24 16:26:41
 * Copyright: 2023 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 页面
-->
<template>
  <div class="left">
    <common-tit-vue title="测评任务"></common-tit-vue>
    <!-- 输入框 -->
    <div class="search">
      <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </div>
    <!-- 输入框 -->
    <!-- 列表 -->
    <div class="list">
      <div class="son" v-for="(item, index) in list" :key="index">
        <div class="title">
          <div class="title2023">{{ item.title }}</div>
          <div>
            <el-button v-if="item.status == '进行中'" type="primary" size="mini">{{ item.status }}</el-button>
            <el-button v-else type="warning" size="mini">{{ item.status }}</el-button>
          </div>
        </div>

        <div class="data">
          <div class="item">
            <div class="bottom">
              <img src="../../../assets/evaluationTask/img/time.png" alt="" />
              <span>开始时间：{{ item.beginTime }}</span>
            </div>
            <div>
              <img src="../../../assets/evaluationTask/img/time.png" alt="" />
              <span>结束时间：{{ item.endTime }}</span>
            </div>
          </div>
          <div class="item">
            <div class="bottom">
              <img src="../../../assets/evaluationTask/img/time.png" alt="" />
              <span>参与人数：{{ item.num }}人</span>
            </div>
            <div>
              <img src="../../../assets/evaluationTask/img/time.png" alt="" />
              <span>参与单位：{{ item.unit }}人</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import commonTitVue from '../components/commonTit.vue';
export default {
  components: {
    commonTitVue,
  },
  data() {
    return {
      input: '',
      list: [
        {
          title: '2023年第一季度员工心态综合测评',
          beginTime: '2023-07-16 10:20',
          endTime: '2023-07-16 12:00',
          num: 3000,
          unit: 3030,
          status: '进行中',
        },
        {
          title: '2023年第一季度员工心态综合测评',
          beginTime: '2023-07-16 10:20',
          endTime: '2023-07-16 12:00',
          num: 3000,
          unit: 3030,
          status: '已完成',
        },
        {
          title: '2023年第一季度员工心态综合测评',
          beginTime: '2023-07-16 10:20',
          endTime: '2023-07-16 12:00',
          num: 3000,
          unit: 3030,
          status: '进行中',
        },
        {
          title: '2023年第一季度员工心态综合测评',
          beginTime: '2023-07-16 10:20',
          endTime: '2023-07-16 12:00',
          num: 3000,
          unit: 3030,
          status: '进行中',
        },
        {
          title: '2023年第一季度员工心态综合测评',
          beginTime: '2023-07-16 10:20',
          endTime: '2023-07-16 12:00',
          num: 3000,
          unit: 3030,
          status: '进行中',
        },
        {
          title: '2023年第一季度员工心态综合测评',
          beginTime: '2023-07-16 10:20',
          endTime: '2023-07-16 12:00',
          num: 3000,
          unit: 3030,
          status: '进行中',
        },
      ],
    };
  },
  methods: {
    // 搜索
    search() {
      console.log('搜索');
    },
  },
};
</script>

<style lang="scss" scoped>
.left {
  width: 459px;
  height: 100%;
  padding: 0 10px;
}
// 搜索框
::v-deep {
  .search .el-input__inner {
    border: 1px solid #00ffab;
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #00ffab;
  }
  .el-icon-search {
    color: #fff;
  }
}
.list {
  width: 100%;
  height: calc(100vh - 110px);
  margin-top: 10px;
  // background-color: pink;
  overflow: auto;
}
.son {
  width: 100%;
  height: 130px;
  padding-top: 10px;
  // background-color: #00ffab;
  background: url('../../../assets/evaluationTask/img/footer-1 (4).png') no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
}
.son:hover {
  background-color: #00ffab;
}
.title {
  // margin-top: 20px;
  display: flex;
  justify-content: space-around;
  font-size: 16px;
  font-weight: 500;
  .title2023 {
    margin-top: 5px;
  }
}
.data {
  display: flex;
  margin-top: 20px;
  .item {
    margin-left: 20px;
    .bottom {
      margin-bottom: 10px;
    }
  }
}
</style>
